/*
 * @Author: zhaoying
 * @Date: 2020-08-27
 * 图表示例
 */

<template>
    <div class="informationConfirme">
        <!--<page-title :title="ruleTitle" @clickRightIconButton="clickExplain"  :rightIconButton="rightIconButton" :iconPageTitleList="iconPageTitleList"></page-title>-->
        <page-title :title="ruleTitle"></page-title>
        <Steps :stepInfo="stepInfo" @changeToSteps='changeToSteps'></Steps>

        <!-- 步骤与正文内容分割线 -->
        <div class="splitDiv"></div>

        <div v-if="customerStatus == '不一致' || customerStatus == '一致'" class="formSection">
            <!-- 客户姓名 -->
            <slot-form-input :slotFormSet="slotFormNameSet"></slot-form-input>

            <!-- 姓名不一致提示 -->
            <div class="tip" v-if="customerStatus == '不一致'">
                客户问卷填写为"<span>{{orgName}}</span>"，根据手机号查询该客户为"<span>{{realName}}</span>"
            </div>

            <!-- 年龄 -->
            <slot-form-input :slotFormSet="slotFormAgeSet"></slot-form-input>

            <!-- 风险偏好 -->
            <slot-form-select :slotFormSet="slotFormRiskSet"></slot-form-select>

        </div>

        <div v-if="customerStatus == '不存在'" class="formSection">
            <!-- 客户姓名 -->
            <slot-form-input :slotFormSet="slotFormNameSet"></slot-form-input>

            <!-- 证件类型 -->
            <slot-form-select :slotFormSet="slotFormTypeSet"></slot-form-select>

            <!-- 证件号码 -->
            <slot-form-input :slotFormSet="slotFormPapersNumSet"></slot-form-input>

            <!-- 年龄 -->
            <slot-form-input :slotFormSet="slotFormAgeSet"></slot-form-input>

            <!-- 风险偏好 -->
            <slot-form-select :slotFormSet="slotFormRiskSet"></slot-form-select>
        </div>




        <!--<button @click="changeSteps()">点击跳转第三步</button>-->

        <!--<div ref='weeklyPrivatePlacementClients' class="weeklyPrivatePlacementClients">-->
            <!--<div class="wrap">-->
                <!--<div class=''>-->
                    <!--&lt;!&ndash;<img src="../assets/img/hrm/lox.png" alt="">&ndash;&gt;-->
                    <!--<span class='title'>人事管理的图表数据示例</span>-->
                    <!--&lt;!&ndash;<img src="../assets/img/hrm/rox.png" alt="">&ndash;&gt;-->
                <!--</div>-->
                <!--<div class='echartsCon' ref='weeklyPrivatePlacementClientsEcharts'></div>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</template>

<script>

//表单组件js&less
import form from '@src/common/components/form/form.js'
import '@src/common/components/form/form.less'

import "./informationConfirme.less";

// 表单项
import slotFormInput from '@src/common/components/form/slot/input'
import slotFormSelect from '@src/common/components/form/slot/select'

//黑条提示
// import tipAction from "@common/components/otherComponents/tipAction/tipAction"
// import tablea from '@src/common/table/table'
import Steps from '@src/common/components/steps/steps'
import pageTitle from '@src/common/pageTitle/pageTitle'

export default {
    name: "informationConfirme",
    mixins:[form],
    components:{
        Steps,
        pageTitle,
        slotFormInput,
        slotFormSelect
    },
    data() {
        return {
            stepInfo: {
                // 步骤进度条的显示数据及步骤序号
                list: [
                    { title: '信息确认', index: 1 },
                    { title: '问卷确认', index: 2 },
                    { title: '填写资产配置现状', index: 3 },
                    { title: '编辑预览', index: 4 },
                    { title: '报告生成', index: 5 }
                    ],
                // 步骤进度数
                step: 1
            },
            ruleTitle: '信息确认', // pageTitle中间部分显示
            backUrl: '', //传给pageTitle组件，返回上一页的标识
            rightIconButton: {className: '\ue65a', type: 'icon'}, // 传一个icon类名 &#xe65a; == '\ue65a'
            iconPageTitleList: [{name:'新建资产配置', index: 1}, {name:'问卷邀答', index: 2}], // 头部右侧显示图标时，点击图标的下拉显示内容
            customerStatus: '不一致', // 状态分为三种： 不一致  一致  不存在

            //客户姓名表单配置项
            slotFormNameSet: {
                params: {
                    label: '客户姓名',
                    // unit: '岁',
                    maxLength: 10,
                    oninput: true,
                    'name': 'name'
                },
                beforeData: null
            },

            //年龄表单配置项
            slotFormAgeSet: {
                params: {
                    label: '年龄',
                    // unit: '岁',
                    maxLength: 3,
                    oninput: true,
                    'name': 'age'
                },
                beforeData: null
            },

            // 证件号码
            slotFormPapersNumSet: {
                params: {
                    label: '证件号码',
                    // unit: '岁',
                    maxLength: 14,
                    oninput: true,
                    'name': 'papersNum'
                },
                beforeData: null
            },

            // 风险偏好类型
            slotFormRiskSet: {
                params: {
                    label: '风险偏好类型',
                    'name': 'riskType'
                },
                beforeData: null
            },

            // 证件类型
            slotFormTypeSet: {
                params: {
                    label: '证件类型',
                    'name': 'type'
                },
                beforeData: null
            },

            orgName: '郑卫',
            realName: '政立路',
        };
    },
    created() {
        // this.isWeiXin();
        // this.initData();
        // this.searchPhoneInfo();
    },

    mounted(){

        this.searchPhoneInfo();
        if(this.isWechat) {
            window.addEventListener('scroll', this.handleScroll, true);  // 监听（绑定）滚轮滚动事件
        };
        this.$parent.changeLoading(false);
        // this.showEcharts();

    },

    updated (){
        // if(this.isOnece) {
        //     mui('.mui-scroll-wrapper').scroll({
        //         scrollX: true, //是否横向滚动
        //         deceleration: 0 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        //     });
        // };
        // this.isOnece = false;
    },

    watch: {
        // AssetData() {
        //    this.nameCard();
        // }
    },
    methods: {
        /*
        * 资产配置待处理进入信息确认页面时，先根据用户输入的手机号码，查询该用户的信息
        * 1、用户问卷填写的名称与手机号码查询的名称不一致的话，回显查询的名称，并提示
        * 2、一致的话，直接回显
        * 3、如果没有查询到用户问卷中填写的手机号码，说明为新客户，需要新建跟踪客户
        * */
        searchPhoneInfo() {
            console.log('11111')
            if (this.customerStatus == '不一致') {
                console.log('333')
                this.slotFormNameSet.beforeData = '郑永成'
            } else if (this.customerStatus == '一致') {

            } else {
                // 不存在
            }

            // this.$axiosHttp.http({
            //         method: "POST",
            //         url: apiUrl.getCategory,
            //         params:params
            //     } ,
            //     (res) => { //"0000"
            //         if (type=='init'){
            //             this.data = res.data.data || [] ; //全部数据赋值，用具分类标签
            //
            //         }else{
            //
            //         }
            //     },
            //     (res) => { // 接口错误 4000+
            //         // 	this.$parent.changeLoading(false) //关闭加载条
            //         // 	this.showNoData = true
            //     },
            //     (res) => { // 接口返回1000
            //         // this.showNoData = true
            //         // this.$parent.changeLoading(false) //关闭加载条
            //     });
        },

        changeSteps() {
            this.stepInfo.step = 3;
        },
        changeToSteps(data) {
            // console.log('点击了当前步骤');
            // console.log(data);
            // 获取当前点击的步骤数值
            this.stepInfo.step = data;
        },

        //点击右侧说明按钮执行的操作
        clickExplain(index) {
            if (index == 1) {
                console.log('点击了新建资产配置');
            } else {
                console.log('点击了问卷邀答');
            }

            //跳转到说明页
            // this.$router.push({path: '/lgbCdn/dueFunds/dueFundsList/dueFundsRules.html'})
        },

        showEcharts() {
            let data = [
                { year: '2020', month: '08', week: '第一周', customerAmount: 12, amountPerCustomer: 2, privatePlacementCustomerNum:3 },
                { year: '2020', month: '08', week: '第二周', customerAmount: 12, amountPerCustomer: 3, privatePlacementCustomerNum:6 },
                { year: '2020', month: '08', week: '第三周', customerAmount: 12, amountPerCustomer: 4, privatePlacementCustomerNum:3 }
            ]
            this.$refs.weeklyPrivatePlacementClients.style.display = 'block';
            let careerGroupManpower = echarts.init(this.$refs.weeklyPrivatePlacementClientsEcharts);
            // 遍历数据 获取图表所需数据
            let xLineData = [];
            let customerAmount = [];
            let amountPerCustomer = [];
            let privatePlacementCustomerNum = [];
            for (let i = 0; i < data.length; i ++) {
                xLineData.push(data[i].year+'-'+data[i].month+data[i].week);
                customerAmount.push(data[i].customerAmount);
                amountPerCustomer.push(data[i].amountPerCustomer);
                privatePlacementCustomerNum.push(data[i].privatePlacementCustomerNum);
            }
            // 画图 赋值
            let options = {
                id: careerGroupManpower,
                xAxis:{
                    data: xLineData,
                    rotate: 45, // x轴数据旋转-90度
                } ,
                yNum: 2, //两个Y轴
                // yUnit:'%',
                sBar: [{
                    name: '客户到账金额(万)',
                    barWidth: this.$fontSize(0.2),
                    data: customerAmount
                },],
                sLine: [{
                    name: '客均到账金额(万)',
                    data: amountPerCustomer,
                    yAxisIndex: 0, //使用左侧Y轴
                },{
                    name: '私募成交客户数',
                    data: privatePlacementCustomerNum,
                    yAxisIndex: 1, //使用右侧Y轴
                }],
                legend: {
                    show: true
                },
                calculateLegend: true,
                color: 'type_9'
            }
            this.$drawBarLine( this, options);
        },

    }
};
</script>

